<template>
	<div  style="padding-left: 0.1rem;padding-right: 0.1rem; height: 100vh;">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-row :gutter="5">
					<el-col :span="8">
						<h3 style="padding-top: 0.3125rem;">患者预约信息总览</h3>
					</el-col>
				</el-row>
			</div>
			<div>

				<el-row :gutter="20">
					<el-col :span="3">
						<el-button @click="clearFilter">显示全部医生</el-button>
					</el-col>
					<el-col :span="3">
						<el-tag type="success" v-model="sum1" style="height: 2.5rem; padding-top: 4px;">
							<h6> 待诊患者总数:{{sum1}}</h6>
						</el-tag>
					</el-col>
					<el-col :span="3">
						<el-tag v-model="sum2" style="height: 2.5rem; padding-top: 4px;">
							<h6>就诊患者总数:{{sum2}}</h6>
						</el-tag>
					</el-col>

				</el-row>
				<el-divider></el-divider>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-table script ref="filterTable"
							:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="padding-top: -0.5rem; width: 100%">
							<el-table-column prop="name" label="姓名" width=" 80">
							</el-table-column>
							<el-table-column prop="IDcard" label="身份证" width="170">
							</el-table-column>
							<el-table-column prop="age" label="年龄">
							</el-table-column>
							<el-table-column prop="ghks" label="挂号科室"
								:filters="[{ text: '骨科', value: '骨科' }, { text: '皮肤科', value: '皮肤科' }, { text: '口腔科', value: '口腔科' }, { text: '内科', value: '内科' }, { text: '儿科', value: '儿科' }]"
								:filter-method="filterHandler">
							</el-table-column>
							<el-table-column prop="ghlx" label="挂号类型"
								:filters="[{ text: '专家号', value: '专家号' }, { text: '普通号', value: '普通号' }]"
								:filter-method="filterHandler">
							</el-table-column>
							<el-table-column prop="ghzt" label="挂号状态"
								:filters="[{ text: '已就诊', value: '已就诊' }, { text: '未就诊', value: '未就诊' }]"
								:filter-method="filterTag">
								<template slot-scope="scope">
									<el-tag :type="scope.row.ghzt === '已就诊' ? 'primary' : 'success'"
										disable-transitions>
										{{scope.row.ghzt}}
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="date1" label="就诊日期">
							</el-table-column>
							<el-table-column prop="date2" label="就诊时间">
							</el-table-column>
							<el-table-column prop="date3" width="120" label="预约时间">
							</el-table-column>
							<el-table-column prop="caozuo" label="操作">
							</el-table-column>
						</el-table>
					</el-col>
					<el-col :span="24">
						<div class="block" style="padding-top: 1rem; text-align: right">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="currentPage4" :page-sizes="[8, 16, 24, 32]" :page-size="100"
								layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
							</el-pagination>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pagesize: 8,
				currentPage: 1,
				tableData: [{
						name: '贺元枫',
						IDcard: '210102199103078993',
						age: 44,
						ghks: '血液科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '泷乐双',
						IDcard: '210102199103078993',
						age: 36,
						ghks: '皮肤科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '王小虎',
						IDcard: '210102199103078993',
						age: 28,
						ghks: '口腔科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '逮凌春',
						IDcard: '210102199103078993',
						age: 16,
						ghks: '牙科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '止一嘉',
						IDcard: '210102199103078993',
						age: 21,
						ghks: '牙科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '波锐达',
						IDcard: '210102199103078993',
						age: 29,
						ghks: '内科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '桂佳惠',
						IDcard: '210102199103078993',
						age: 34,
						ghks: '内科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '禾令燕',
						IDcard: '210102199103078993',
						age: 32,
						ghks: '牙科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '鲁笛',
						IDcard: '210102199103078993',
						age: 38,
						ghks: '血液科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '袁欣合',
						IDcard: '210102199103078993',
						age: 35,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '王小虎',
						IDcard: '210102199103078993',
						age: 57,
						ghks: '血液科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '龙宛丝',
						IDcard: '210102199103078993',
						age: 23,
						ghks: '牙科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '粟琳溪',
						IDcard: '210102199103078993',
						age: 6,
						ghks: '儿科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '法嫚儿',
						IDcard: '210102199103078993',
						age: 37,
						ghks: '皮肤科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '朴幼安',
						IDcard: '210102199103078993',
						age: 12,
						ghks: '儿科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '謇听莲',
						IDcard: '210102199103078993',
						age: 91,
						ghlx: '专家号',
						ghks: '血液科',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '寿波',
						IDcard: '210102199103078993',
						age: 73,
						ghks: '血液科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '梅怡雨',
						IDcard: '210102199103078993',
						age: 38,
						ghks: '皮肤科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '江先',
						IDcard: '210102199103078993',
						age: 28,
						ghks: '牙科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '王小虎',
						IDcard: '210102199103078993',
						age: 19,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '戴令婧',
						IDcard: '210102199103078993',
						age: 38,
						ghks: '皮肤科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '天嘉怡',
						IDcard: '210102199103078993',
						age: 41,
						ghks: '内科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '隋之桃',
						IDcard: '210102199103078993',
						age: 26,
						ghks: '内科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '莫流婉',
						IDcard: '210102199103078993',
						age: 47,
						ghks: '皮肤科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '郦灿灿',
						IDcard: '210102199103078993',
						age: 46,
						ghks: '口腔科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '粟谷梦',
						IDcard: '210102199103078993',
						age: 35,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '玉春华',
						IDcard: '210102199103078993',
						age: 47,
						ghks: '口腔科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '闵含香',
						IDcard: '210102199103078993',
						age: 32,
						ghks: '内科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '其弘大',
						IDcard: '210102199103078993',
						age: 54,
						ghks: '口腔科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '柴映雁',
						IDcard: '210102199103078993',
						age: 63,
						ghks: '血液科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '营歌阑',
						IDcard: '210102199103078993',
						age: 15,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '王小虎',
						IDcard: '210102199103078993',
						age: 23,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '环千柔',
						IDcard: '210102199103078993',
						age: 85,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '牵向露',
						IDcard: '210102199103078993',
						age: 54,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '周忆灵',
						IDcard: '210102199103078993',
						age: 28,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '诸葛雅静',
						IDcard: '210102199103078993',
						age: 12,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '信元洲',
						IDcard: '220102199003073513',
						age: 35,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '祭又柔',
						IDcard: '210402199003073630',
						age: 26,
						ghks: '皮肤科',
						ghlx: '专家号',
						ghzt: '未就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '尤令锋',
						IDcard: '210402199003073016',
						age: 43,
						ghks: '骨科',
						ghlx: '普通号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}, {
						name: '毛良朋',
						IDcard: '130102199003071284',
						age: 23,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					},
					{
						name: '纵好',
						IDcard: '130102199003074872',
						age: 23,
						ghks: '骨科',
						ghlx: '专家号',
						ghzt: '已就诊',
						date1: '2021-6-6',
						date2: '8:24',
						date3: '2021-6-5 8:00',
						caozuo: '删除'
					}
				],
				options: [{
						value: '选项1',
						label: '口腔科'
					}, {
						value: '选项2',
						label: '妇科'
					}, {
						value: '选项3',
						label: '内科'
					}, {
						value: '选项4',
						label: '骨科'
					}, {
						value: '选项5',
						label: '皮肤科'
					},
					{
						value: '选项5',
						label: '中医科'
					}, {
						value: '选项5',
						label: '儿科'
					}, {
						value: '选项5',
						label: '血液科'
					}
				],
				sum1: 45,
				sum2: 123,
				value: '',
				value1: '',
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				}
			}
		},
		methods: {
			handleSizeChange: function(val) {
				this.pagesize = val;
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
			},

			clearFilter() {
				this.$refs.filterTable.clearFilter();
			},
			filterTag(value, row) {
				return row.ghzt === value;
			},
			filterHandler(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			},
		}


	}
</script>

<style>
</style>
